<template>
	<view class="content">
		<view class="cal">
			<view class="cal_tab">
				<view @click="setI(index)" :class="indexs == index ? 'active' : ''" v-for="(item, index) in calList" :key="index">{{ item }}</view>
			</view>
			<view class="block">
				<view class="item">
					<text class="gray">合约</text>
					<view class="">
						<text>BTC/USDT</text>
						<uni-icons type="arrowright" :color="'#A4A4A4'" size="16"></uni-icons>
					</view>
				</view>
				<view class="item">
					<text class="gray">开仓类型</text>
					<view class="">
						<text>BTC/USDT</text>
						<uni-icons type="arrowright" :color="'#A4A4A4'" size="16"></uni-icons>
					</view>
				</view>
				<view class="item">
					<text class="gray">选择杠杆</text>
					<view class="">
						<text>20X</text>
						<uni-icons type="arrowright" :color="'#A4A4A4'" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view class="block two" v-if="indexs=='0'">
				<view class="item">
					<text class="gray">开仓价格</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>USDT</text>
					</view>
				</view>
				<view class="item">
					<text class="gray">平仓价格</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>USDT</text>
					</view>
				</view>
				<view class="item">
					<text class="gray">开仓数量</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>张</text>
					</view>
				</view>
			</view>
			<view class="cal_tab" v-if="indexs=='1'" style="justify-content: space-around;margin: 32upx 0;">
				<view @click="setP(index)" :class="profit == index ? 'active' : ''" v-for="(item, index) in profitList" :key="index">{{ item }}</view>
			</view>
			<view class="block two" v-if="indexs=='1'">
				<view class="item">
					<text class="gray">开仓价格</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>USDT</text>
					</view>
				</view>
				<view class="item" v-if="profit=='1'">
					<text class="gray">开仓数量</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>张</text>
					</view>
				</view>
				<view class="item">
					<text class="gray">目标收益率</text>
					<view class="m_input">
						<input type="tel" value="" placeholder="请输入" />
						<text>%</text>
					</view>
				</view>
			</view>
			<view class="blue_btn">开始计算</view>
			<view class="gray" style="font-size: 18rpx;padding: 0 24upx;margin-bottom: 24upx;">
				注：实际交易中因存在手续费，可能导致计算结果与交易结果不一致，该价格 仅供参考，实际还请以风险度为准。
			</view>
			<view class="block2" v-if="indexs=='0'">
				<view class="title">计算结果</view>
				<view class="item">
					<text>保证金</text>
					<text class="bla">0.00000000 USDT</text>
				</view>
				<view class="item">
					<text>收益</text>
					<text class="sell">0 USDT</text>
				</view>
				<view class="item">
					<text>仓位收益率</text>
					<text class="sell">0%</text>
				</view>
				<view class="item">
					<text>本金收益率</text>
					<text class="sell">0%</text>
				</view>
			</view>
			<view class="block2" v-if="indexs=='1'">
				<view class="title">计算结果</view>
				<view class="item">
					<text>目标平仓价格（USDT）</text>
					<text class="bla">0.00000000 USDT</text>
				</view>
			</view>
			<view class="red_wz">注：计算结果点击计算后再显示</view>
		</view>
		<!-- 确认 -->
		<Modal v-if="showOut" :title="'开启委托确认'" @close="closeModal()">
			<view class="msg_model">
				<view class="block4">是否开启委托下单确认？</view>
				<view class="subto">
					<view class="no" @click="closeModal()">取消</view>
					<view class="yes">确认开启</view>
				</view>
			</view>
		</Modal>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import Modal from '@/components/msg-modal/index.vue';
export default {
	components: { uniIcons, Modal },
	data() {
		return {
			showOut: false,
			price: false,
			plan: false,
			coinType: 0,
			indexs: 0,
			coinList: ['张', '手'],
			calList: ['收益计算', '目标价计算', '强平价计算'],
			profit:0,
			profitList: ['按预期收益率', '按预期收益'],
		};
	},
	computed: {},
	onShow() {},
	methods: {
		closeModal() {
			this.showOut = false;
		},
		//选择1
		set1(e) {
			this.coinType = e.target.value;
		},
		//tab
		setI(inde) {
			this.indexs = inde;
		},
		//tab
		setP(inde) {
			this.profit = inde;
		},
		switch1Change: function(e) {
			if (e.target.value) {
				this.showOut = true;
			}
		},
		switch2Change: function(e) {
			if (e.target.value) {
				this.showOut = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
